import { ref } from "vue";
import { defineStore } from "pinia";
import { getCategoryAPI } from "@/apis/layout";

export const useCategoryStore = defineStore("category", () => {
  // 导航列表的数据管理
  // state 用来存储导航栏数据
  const categoryList = ref([]);

  // 要在template异步渲染数据，而这些数据是“异步获取”的。如果不设置为响应式，数据变了，页面不会自动更新！
  // 因此 categoryList 被设置为响应式数据

  // action 获取导航数据的方法
  const getCategory = async () => {
    const res = await getCategoryAPI();
    categoryList.value = res.result;
  };

  return { categoryList, getCategory };
});
